Documentation

Les entêtes sont composés de plusieurs éléments, exposés ci dessous.

Pour la nouvelle navigtion, il faudra ajouter la class active à l'élément o-nav--flex-item

.js requis :

Ne pas copier les styles qui sont rensignés dans le composant, ceux-ci sont uniquement présent pour afficher correctement les éléments dans le guide de style

Navigation en menu déroulant

Preview

Balisage


                
                    <nav class="o-nav--dropdown js-open-close">
                        <div class="c-dropdown__current u-centerSpaceBetween">
                            <div class="u-flex"><i class="c-fonticon__logo-datasprint"></i>
                                <div class="u-title--header--adapt u-hBubble">DataSprint</div>
                            </div><i class="c-fonticon__icon-chevron u-white-text"></i>
                        </div>
                        <div class="c-dropdown__list u-centerSpaceBetween u-column"><a class="c-dropdown__element u-flex u-hFramed" href=""><i class="c-fonticon__logo-minesprint"></i>
                                <div class="u-title--header--adapt u-hBubble">MineSprint</div></a></div>
                    </nav>

Barre de recherche

Preview

Balisage


                
                    <div class="o-menu--bar" style="height: 100px;">
                        <form class="u-center o-search-bar">
                            <input type="text" placeholder="Rechercher un projet existant"/>
                            <button><i class="c-fonticon__icon-search u-white-text"></i></button>
                        </form>
                    </div>

Exemple d'un entête complet

Preview

Fr

Balisage


                
                    <div class="datasprint">
                        <header class="o-header" style="position:static">
                            <nav class="o-nav--dropdown js-open-close">
                                <div class="c-dropdown__current u-centerSpaceBetween">
                                    <div class="u-flex"><i class="c-fonticon__logo-datasprint"></i>
                                        <div class="u-title--header--adapt u-hBubble">DataSprint</div>
                                    </div><i class="c-fonticon__icon-chevron u-white-text"></i>
                                </div>
                                <div class="c-dropdown__list u-centerSpaceBetween u-column"><a class="c-dropdown__element u-flex u-hFramed" href=""><i class="c-fonticon__logo-minesprint"></i>
                                        <div class="u-title--header--adapt u-hBubble">MineSprint</div></a></div>
                            </nav>
                            <div class="o-menu--bar">
                                <form class="u-center o-search-bar">
                                    <input type="text" placeholder="Rechercher un projet existant"/>
                                    <button><i class="c-fonticon__icon-search u-white-text"></i></button>
                                </form>
                            </div>
                            <div class="c-header__options">
                                <div class="c-account-management u-white-text"><i class="c-fonticon__icon-user"></i><span>Mon compte</span><i class="c-fonticon__icon-chevron"></i>
                                    <ul class="c-account-management__menu">
                                        <li><a href=""><i class="c-fonticon__icon-user"></i><span>Accueil</span></a></li>
                                        <li><a href=""><i class="c-fonticon__icon-calendar"></i><span>Site GeoSprint</span></a></li>
                                        <li><a href=""><i class="c-fonticon__icon-datatype"></i><span>Site Sol-solution</span></a></li>
                                    </ul>
                                </div>
                                <div class="o-languageSwitcher">
                                    <div class="c-current"><span class="c-lang">Fr</span><i class="c-fonticon__icon-chevron"></i></div>
                                    <ul class="c-language__list language-switcher-locale-url">
                                        <li data-lang="FR"><a href="">FR</a></li>
                                        <li data-lang="EN"><a href="">EN</a></li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                    </div>

1. Exemple Bandeau entête

Preview

Description :

Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.

Sondages
Remblais
Anomalies
Rapports

Balisage


                
                    <header class="o-header__bandeau">
                        <div class="u-flex"><img src="https://via.placeholder.com/200" alt=""/>
                            <div class="content">
                                <div class="content__text"><strong>Description :</strong>
                                    <div class="content__text__paragraph">
                                        <p class="u-text">Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.</p>
                                    </div>
                                </div>
                                <div class="o-steps">
                                    <div class="c-step__item">Sondages</div>
                                    <div class="c-step__item active">Remblais</div>
                                    <div class="c-step__item">Anomalies</div>
                                    <div class="c-step__item">Rapports</div>
                                </div>
                            </div>
                        </div>
                    </header>

2. Exemple Bandeau entête (long texte)

Preview

Description :

Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.

Quisque feugiat massa id ultrices convallis. Curabitur eget interdum risus, ut laoreet massa. Morbi laoreet, leo eget facilisis luctus, arcu est congue purus, a euismod sapien ante vitae neque. Morbi nec arcu magna. In a lobortis tortor. Mauris facilisis diam ac orci porttitor, vitae molestie nisi imperdiet. Sed euismod elementum ligula a scelerisque. Curabitur nunc dui, sodales a pellentesque nec, tincidunt eu nunc. In eu lectus volutpat, pulvinar elit quis, maximus nunc. Donec non mauris volutpat, consequat felis ut, congue augue. Suspendisse potenti. Nulla pretium, justo interdum cursus ultricies, tortor tortor finibus felis, vitae imperdiet sem dolor id nunc. Sed ipsum quam, placerat quis ipsum eget, commodo iaculis ligula. Nam hendrerit, diam vitae fermentum aliquet, est ligula iaculis enim, eu facilisis arcu libero vitae nulla. Phasellus id odio sem. Vivamus at arcu pretium felis auctor congue et eget nunc.

Sondages
Remblais
Anomalies
Rapports

Balisage


                
                    <header class="o-header__bandeau">
                        <div class="u-flex"><img src="https://via.placeholder.com/200" alt=""/>
                            <div class="content">
                                <div class="content__text"><strong>Description :</strong>
                                    <div class="content__text__paragraph">
                                        <p class="u-text">Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.</p>
                                        <p class="u-text">Quisque feugiat massa id ultrices convallis. Curabitur eget interdum risus, ut laoreet massa. Morbi laoreet, leo eget facilisis luctus, arcu est congue purus, a euismod sapien ante vitae neque. Morbi nec arcu magna. In a lobortis tortor. Mauris facilisis diam ac orci porttitor, vitae molestie nisi imperdiet. Sed euismod elementum ligula a scelerisque. Curabitur nunc dui, sodales a pellentesque nec, tincidunt eu nunc. In eu lectus volutpat, pulvinar elit quis, maximus nunc. Donec non mauris volutpat, consequat felis ut, congue augue. Suspendisse potenti. Nulla pretium, justo interdum cursus ultricies, tortor tortor finibus felis, vitae imperdiet sem dolor id nunc. Sed ipsum quam, placerat quis ipsum eget, commodo iaculis ligula. Nam hendrerit, diam vitae fermentum aliquet, est ligula iaculis enim, eu facilisis arcu libero vitae nulla. Phasellus id odio sem. Vivamus at arcu pretium felis auctor congue et eget nunc.</p>
                                    </div>
                                </div>
                                <div class="o-steps">
                                    <div class="c-step__item">Sondages</div>
                                    <div class="c-step__item active">Remblais</div>
                                    <div class="c-step__item">Anomalies</div>
                                    <div class="c-step__item">Rapports</div>
                                </div>
                            </div>
                        </div>
                    </header>

3. Exemple Bandeau entête (taille image mise en inline)

Preview

Description :

Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.

Sondages
Remblais
Anomalies
Rapports

Balisage


                
                    <header class="o-header__bandeau">
                        <div class="u-flex"><img src="https://via.placeholder.com/200" alt="" style=" width:400px; height:200px; "/>
                            <div class="content">
                                <div class="content__text"><strong>Description :</strong>
                                    <div class="content__text__paragraph">
                                        <p class="u-text">Ut risus elit, maximus a turpis sed, ultrices molestie urna. Quisque pellentesque vitae turpis vitae auctor. Ut interdum vitae erat et congue. Ut sapien magna, fringilla at libero ac, volutpat faucibus nunc. Donec purus tortor, blandit quis venenatis quis, consequat ut quam. Etiam dignissim efficitur arcu, vel aliquam massa rhoncus vel. Nulla auctor ullamcorper malesuada. Mauris facilisis, odio eget venenatis imperdiet, turpis sapien accumsan turpis, non iaculis nisi mi pulvinar turpis. Donec bibendum congue fermentum. Vivamus eget metus at justo pulvinar facilisis. Ut a quam eu justo efficitur mollis. Proin in arcu at velit efficitur gravida. Praesent quis sem elit. Vestibulum iaculis eget augue sit amet feugiat. Etiam congue, quam eget viverra cursus, mi lacus eleifend lorem, a malesuada libero arcu vel mauris.</p>
                                    </div>
                                </div>
                                <div class="o-steps">
                                    <div class="c-step__item">Sondages</div>
                                    <div class="c-step__item active">Remblais</div>
                                    <div class="c-step__item">Anomalies</div>
                                    <div class="c-step__item">Rapports</div>
                                </div>
                            </div>
                        </div>
                    </header>